<template>
  <div class="system-management-container">
    <div class="page-header">
      <h2>系统管理</h2>
      <div class="header-actions">
        <button class="btn-primary">保存配置</button>
        <button class="btn-secondary">重置设置</button>
      </div>
    </div>
    
    <div class="system-sections">
      <div class="section-card">
        <div class="section-header">
          <div class="section-icon">⚙️</div>
          <div class="section-title">
            <h3>系统设置</h3>
            <p>配置系统基本参数</p>
          </div>
        </div>
        <div class="section-content">
          <div class="setting-item">
            <label>系统名称</label>
            <input type="text" value="KMS知识库管理系统" />
          </div>
          <div class="setting-item">
            <label>系统版本</label>
            <input type="text" value="v1.0.0" readonly />
          </div>
          <div class="setting-item">
            <label>最大用户数</label>
            <input type="number" value="1000" />
          </div>
        </div>
      </div>
      
      <div class="section-card">
        <div class="section-header">
          <div class="section-icon">📝</div>
          <div class="section-title">
            <h3>系统日志</h3>
            <p>查看系统运行日志</p>
          </div>
        </div>
        <div class="section-content">
          <div class="log-list">
            <div class="log-item">
              <span class="log-time">2024-01-15 10:30:25</span>
              <span class="log-level info">INFO</span>
              <span class="log-message">用户登录成功</span>
            </div>
            <div class="log-item">
              <span class="log-time">2024-01-15 10:25:18</span>
              <span class="log-level warning">WARN</span>
              <span class="log-message">数据库连接池接近上限</span>
            </div>
            <div class="log-item">
              <span class="log-time">2024-01-15 10:20:45</span>
              <span class="log-level error">ERROR</span>
              <span class="log-message">文件上传失败</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="section-card">
        <div class="section-header">
          <div class="section-icon">💾</div>
          <div class="section-title">
            <h3>数据备份</h3>
            <p>管理系统数据备份</p>
          </div>
        </div>
        <div class="section-content">
          <div class="backup-actions">
            <button class="btn-primary">立即备份</button>
            <button class="btn-secondary">定时备份</button>
          </div>
          <div class="backup-list">
            <div class="backup-item">
              <span class="backup-name">backup_20240115_103000.sql</span>
              <span class="backup-size">125.6 MB</span>
              <span class="backup-date">2024-01-15 10:30</span>
              <button class="btn-sm">下载</button>
            </div>
            <div class="backup-item">
              <span class="backup-name">backup_20240114_103000.sql</span>
              <span class="backup-size">118.2 MB</span>
              <span class="backup-date">2024-01-14 10:30</span>
              <button class="btn-sm">下载</button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="section-card">
        <div class="section-header">
          <div class="section-icon">🔒</div>
          <div class="section-title">
            <h3>安全设置</h3>
            <p>配置系统安全参数</p>
          </div>
        </div>
        <div class="section-content">
          <div class="setting-item">
            <label>密码最小长度</label>
            <input type="number" value="8" />
          </div>
          <div class="setting-item">
            <label>登录失败锁定次数</label>
            <input type="number" value="5" />
          </div>
          <div class="setting-item">
            <label>会话超时时间(分钟)</label>
            <input type="number" value="30" />
          </div>
        </div>
      </div>
      
      <div class="section-card">
        <div class="section-header">
          <div class="section-icon">📡</div>
          <div class="section-title">
            <h3>系统监控</h3>
            <p>监控系统运行状态</p>
          </div>
        </div>
        <div class="section-content">
          <div class="monitor-stats">
            <div class="monitor-item">
              <span class="monitor-label">CPU使用率</span>
              <span class="monitor-value">45%</span>
            </div>
            <div class="monitor-item">
              <span class="monitor-label">内存使用率</span>
              <span class="monitor-value">67%</span>
            </div>
            <div class="monitor-item">
              <span class="monitor-label">磁盘使用率</span>
              <span class="monitor-value">23%</span>
            </div>
            <div class="monitor-item">
              <span class="monitor-label">网络状态</span>
              <span class="monitor-value status-good">正常</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 系统管理组件逻辑
</script>

<style scoped>
.system-management-container {
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.page-header h2 {
  color: #1f2937;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 1rem;
}

.btn-primary {
  background: #4f46e5;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  cursor: pointer;
  font-weight: 500;
}

.btn-secondary {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  cursor: pointer;
  font-weight: 500;
}

.system-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 1.5rem;
}

.section-card {
  background: white;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.section-icon {
  font-size: 2rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  border-radius: 0.5rem;
}

.section-title h3 {
  color: #1f2937;
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
}

.section-title p {
  color: #6b7280;
  font-size: 0.875rem;
  margin: 0;
}

.section-content {
  margin-top: 1rem;
}

.setting-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.setting-item label {
  color: #374151;
  font-weight: 500;
  min-width: 120px;
}

.setting-item input {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.875rem;
}

.log-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 200px;
  overflow-y: auto;
}

.log-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
  background: #f9fafb;
  border-radius: 0.375rem;
  font-size: 0.75rem;
}

.log-time {
  color: #6b7280;
  min-width: 140px;
}

.log-level {
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-weight: 500;
  min-width: 50px;
  text-align: center;
}

.log-level.info {
  background: #dbeafe;
  color: #1e40af;
}

.log-level.warning {
  background: #fef3c7;
  color: #92400e;
}

.log-level.error {
  background: #fef2f2;
  color: #dc2626;
}

.log-message {
  color: #374151;
  flex: 1;
}

.backup-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.backup-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.backup-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background: #f9fafb;
  border-radius: 0.375rem;
  font-size: 0.875rem;
}

.backup-name {
  color: #1f2937;
  font-weight: 500;
  flex: 1;
}

.backup-size {
  color: #6b7280;
  min-width: 80px;
}

.backup-date {
  color: #6b7280;
  min-width: 120px;
}

.btn-sm {
  background: #4f46e5;
  color: white;
  border: none;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 0.75rem;
}

.monitor-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.monitor-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem;
  background: #f9fafb;
  border-radius: 0.375rem;
  text-align: center;
}

.monitor-label {
  color: #6b7280;
  font-size: 0.75rem;
  font-weight: 500;
}

.monitor-value {
  color: #1f2937;
  font-size: 1.125rem;
  font-weight: 700;
}

.monitor-value.status-good {
  color: #059669;
}

@media (max-width: 768px) {
  .system-sections {
    grid-template-columns: 1fr;
  }
  
  .setting-item {
    flex-direction: column;
    align-items: stretch;
  }
  
  .setting-item label {
    min-width: auto;
  }
}
</style>
